<template>
  <view class="content">
    <view class="form">
      <view class="inputWrapper">
        <text>请假时间: {{ modify.leaveTime }}</text>
      </view>
      <view class="inputWrapper">
        <text>返回时间: {{ modify.backTime }}</text>
      </view>
      <view class="inputWrapper">
        <text>请假理由: {{ modify.leaveReason }}</text>
      </view>
    </view>
    <u-form class="form" :model="modifyForm" ref="uForm">
      <u-form-item prop="location" class="inputWrapper">
        <!-- 是否同意 -->
        <view>是否同意</view>
        <u-radio-group
          v-model="modifyForm.result"
          placement="column"
          @change="groupChange"
        >
          <u-radio
            :customStyle="{ marginBottom: '8px' }"
            v-for="(item, index) in modifyList"
            :key="index"
            :label="item.lable"
            :name="item.value"
            @change="radioChange"
          >
          </u-radio>
        </u-radio-group>
      </u-form-item>
      <u-form-item prop="location" class="inputWrapper">
        <u-input v-model="modifyForm.remark" placeholder="意见" />
      </u-form-item>
      <view class="loginBtn">
        <view class="btnValue" @click="modifyss">提交</view>
      </view>
    </u-form>
  </view>
</template>

<script>
import api from '@/api/teach/api.js'
export default {
  data() {
    return {
      course_id: '',
      modifyList: [
        { value: '1', lable: '拒绝' },
        { value: '2', lable: '同意' },
      ],
      modify: {},
      modifyForm: {},
    }
  },
  methods: {
    // modifyss() {
    //   console.log('点击')
    // },
    modifyss() {
      console.log(this.modifyForm)
      let parme = {}
      parme = this.modifyForm
      this.$http
        .getMethod(api.modifyLeave, parme)
        .then((res) => {
          if (res.code != 200) {
            uni.showToast({
              title: res.message,
              icon: 'none',
            })
          } else {
            uni.navigateTo({
              url: '/pages/teacher/detailed/detailed?id=' + this.course_id,
            })
            uni.showToast({
              title: res.message,
              icon: 'none',
            })
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    groupChange(n) {},
    radioChange(n) {
      this.modifyForm.result = n
    },
  },
  onLoad(option) {
    this.course_id = option.courseId
    let parme = {}
    parme.column = 'leave_id'
    parme.value = option.id
    this.$http
      .getMethod(api.findLeaveByColumn, parme)
      .then((res) => {
        if (res.code != 200) {
          uni.showToast({
            title: res.message,
            icon: 'none',
          })
        } else {
          uni.showToast({
            title: res.message,
            icon: 'none',
          })
          this.modify = res.data[0]
          this.modifyForm.leaveId = this.modify.leaveId
          this.modifyForm.time = uni.$u.timeFormat(
            Number(new Date()),
            'yyyy-mm-dd h:M:s'
          )
          this.modifyForm.result = this.modify.approvalResult
          this.modifyForm.remark = this.modify.approvalRemark
        }
      })
      .catch((error) => {
        console.log(error)
      })
  },
}
</script>

<style scoped lang="less">
.content {
  padding: 20rpx;
}
.w70 {
  width: 70%;
}
.u-form-item {
  border-bottom: 1upx solid #000;
}
.loginBtn {
  width: 100%;
  height: 80upx;
  background: #77b307;
  border-radius: 50upx;
  margin-top: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.loginBtn .btnValue {
  color: white;
}
</style>
